<template>
  <div>
    <el-dialog
      class="dialog-style"
      :visible.sync="dialogVisible"
      :fullscreen="true"
      :show-close="false"
      :append-to-body="true">
      <div slot="title" class="title">
        <el-button class="back" type="text" @click="dialogVisible=false;">返回</el-button>
        <span>{{deptName}} 面试考评设置</span>
        <!-- <span><el-button type="danger" @click="delExam" class="del-btn" v-if="isAuth('recruitment:hrrecruitmentexamination:delete')">删除面试卷</el-button></span> -->
      </div>
      <div class="content">
        <div v-for="(item, index) in questionList" :key="item.id" class="question-item">
          <div class="row-1">
            <span>{{index+1}}、{{item.questionName}}</span>
            <i class="el-icon-edit-outline" @click="showQuestionFormDialog(item)"></i>
          </div>
          <div class="rows">
            <div v-for="(child, childIdx) in item.optionList" :key="childIdx">
              <span>{{childIdx+1}}、{{child.optionContent}}</span>
              <span>（{{child.optionDatatype==='1' ? '输入框' : '单选'}}）</span>
              <i class="el-icon-edit-outline" @click="showAnswerFormDialog(child, item)"></i>
            </div>
            <el-button type="text" @click="showAnswerFormDialog(false, item)" v-if="isAuth('recruitment:hrrecruitmentexamination:save')">新增选项</el-button>
          </div>
        </div>
        <!-- 两项默认的题目 -->
        <div v-for="(item, index) in defaultQuestionList" :key="item.id" class="question-item">
          <div class="row-1">
            <span>{{questionList.length+index+1}}、{{item.questionName}}</span>
          </div>
          <div class="rows">
            <div v-for="(child, childIdx) in item.optionList" :key="childIdx">
              <span>{{childIdx+1}}、{{child.optionContent}}</span>
              <span>（{{child.optionDatatype==='1' ? '输入框' : '单选'}}）</span>
            </div>
          </div>
        </div>
        <el-button type="text" @click="showQuestionFormDialog(false)" v-if="isAuth('recruitment:hrrecruitmentexamination:save')">新增考评</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="!questionForm.id ? '新增考核评定' : '编辑考核评定'"
      :close-on-click-modal="false"
      :visible.sync="questionFormDialogVisible"
      width="520px"
      :append-to-body="true">
      <el-form ref="questionForm" :model="questionForm" label-width="80px">
        <el-form-item label="评定内容" prop="questionName"
        :rules="[{ required: true, message: '请输入评定内容', trigger: 'blur' }]">
          <el-input v-model="questionForm.questionName" placeholder="请输入评定内容" :disabled="!canAddOrEditQuestion"></el-input>
        </el-form-item>
        <el-form-item label="序号" prop="questionSort"
        :rules="[{ required: true, message: '请输入序号', trigger: 'blur' }]">
          <el-input type="number" v-model="questionForm.questionSort" placeholder="请输入序号" @wheel.native.prevent="stopScrollFun($event)" :disabled="!canAddOrEditQuestion"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div><el-button size="mini" type="danger" v-if="questionForm.id && isAuth('recruitment:hrrecruitmentexamination:delete')" @click="delQuestion">删除</el-button></div>
        <div>
          <el-button @click="questionFormDialogVisible = false" size="mini">取消</el-button>
          <el-button type="primary" @click="submitQuestionForm('questionForm')" size="mini" v-if="canAddOrEditQuestion">确定</el-button>
        </div>
      </span>
    </el-dialog>
    <el-dialog
      :title="!answerForm.id ? '新增选项' : '编辑选项'"
      :close-on-click-modal="false"
      :visible.sync="answerFormDialogVisible"
      width="520px"
      :append-to-body="true">
      <el-form ref="answerForm" :model="answerForm" label-width="80px">
        <el-form-item label="选项内容" prop="optionContent"
        :rules="[{ required: true, message: '请输入选项内容', trigger: 'blur' }]">
          <el-input v-model="answerForm.optionContent" placeholder="请输入选项内容" :disabled="!canAddOrEditAnswer"></el-input>
        </el-form-item>
        <el-form-item label="序号" prop="optionSort"
        :rules="[{ required: true, message: '请输入序号', trigger: 'blur' }]">
          <el-input type="number" v-model="answerForm.optionSort" placeholder="请输入序号" @wheel.native.prevent="stopScrollFun($event)" :disabled="!canAddOrEditAnswer"></el-input>
        </el-form-item>
        <!-- <el-form-item label="分值" prop="optionScope"
        :rules="[{ required: true, message: '请输入分值', trigger: 'blur' }]">
          <el-input type="number" v-model="answerForm.optionScope" placeholder="请输入分值" @wheel.native.prevent="stopScrollFun($event)"></el-input>
        </el-form-item> -->
         <el-form-item label="所属评点" prop="optionBelongId" :rules="[{ required: true, message: '请选择所属评点', trigger: 'blur' }]">
          <el-select v-model="answerForm.optionBelongId" placeholder="请选择所属评点" :disabled="!canAddOrEditAnswer">
            <el-option :label="item.questionName" :value="item.id" v-for="item in questionList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选项类型">
          <el-radio-group v-model="answerForm.optionDatatype" :disabled="!canAddOrEditAnswer">
            <el-radio label="2">单选</el-radio>
            <el-radio label="1">输入框</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div><el-button size="mini" type="danger" v-if="answerForm.id && isAuth('recruitment:hrrecruitmentexamination:delete')" @click="delAnswer">删除</el-button></div>
        <div>
          <el-button @click="answerFormDialogVisible = false" size="mini">取消</el-button>
          <el-button type="primary" @click="submitAnswerForm('answerForm')" size="mini" v-if="canAddOrEditAnswer">确定</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dingMixin from  '@/mixins/ding'
import formUtil from '@/utils/formUtil'
export default {
  data () {
    return {
      deptName: '',
      examId: '',
      dialogVisible: false,
      questionList: [],
      defaultQuestionList: [
        { questionName: '面试结果', optionList: [
          {id: '4', optionContent: '拒绝',  optionScope: '', optionDatatype: '2'},
          {id: '2', optionContent: '备用', optionScope: '', optionDatatype: '2'},
          {id: '1', optionContent: '可录用',  optionScope: '', optionDatatype: '2'}] },
        { questionName: '综合评价', optionList: [{optionContent: '评价', optionScope: '', optionDatatype: '1'},] },
      ],
      questionFormDialogVisible: false,
      questionForm: {
        questionName: '',
        questionBelongId: '',
        questionSort: '',
      },
      answerFormDialogVisible: false,
      answerForm: {
        optionBelongId: '',
        optionContent: '',
        optionSort: '',
        optionScope: '',
        optionDatatype: '2',
      }
    };
  },
  mixins: [dingMixin],
  computed: {
    canAddOrEditQuestion() {
      return (this.isAuth('recruitment:hrrecruitmentexamination:save') && !this.questionForm.id) || (this.isAuth('recruitment:hrrecruitmentexamination:update') && this.questionForm.id)
    },
    canAddOrEditAnswer() {
      return (this.isAuth('recruitment:hrrecruitmentexamination:save') && !this.answerForm.id) || (this.isAuth('recruitment:hrrecruitmentexamination:update') && this.answerForm.id)
    },
  },
  methods: {
    //禁止滚动
    stopScrollFun(evt) {
      evt = evt || window.event;
      if(evt.preventDefault) {
        // Firefox
        evt.preventDefault();
        evt.stopPropagation();
      } else {
        // IE
        evt.cancelBubble=true;
        evt.returnValue = false;
      }
      return false;
    },
    async init(dept) {
      this.deptName = dept.deptName;
      let {list} = await this.$httpN.postB('recruitment/hrrecruitmentexamination/list', { examinationDeptId: dept.id })
      if(list.length > 0) {
        this.examId = list[0].id;
        this.getQuestionList();
      }
      this.dialogVisible = true;
    },
    async getQuestionList() {
      let {list} = await this.$httpN.postB('recruitment/hrrecruitmentquestion/list', { questionBelongId: this.examId, limit: 999 })
      this.questionList = list;
    },
    showQuestionFormDialog(item) {
      formUtil.resetData(this.questionForm);
      if(this.$refs.questionForm) this.$refs.questionForm.clearValidate();
      if(item) {
        this.questionForm = JSON.parse(JSON.stringify(item))
      } else {
        this.questionForm.questionSort = this.questionList.length + 1
      }
      this.questionForm.questionBelongId = this.examId;
      this.questionFormDialogVisible = true;
    },
    submitQuestionForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if(!await this.$httpN.postB(!this.questionForm.id ? 'recruitment/hrrecruitmentquestion/save' : 'recruitment/hrrecruitmentquestion/update', this.questionForm)) return
          formUtil.submitSuccess('保存成功');
          this.getQuestionList();
          this.questionFormDialogVisible = false;
        }
      });
    },
    delQuestion() {
      formUtil.submitConfirm('请问您是否确认删除该考核评定', async ()=> {
        if(!await this.$httpN.postB('recruitment/hrrecruitmentquestion/delete', [this.questionForm.id], false)) return;
        formUtil.submitSuccess('删除成功');
        this.getQuestionList();
        this.questionFormDialogVisible = false;
      })
    },
    showAnswerFormDialog(answer, question) {
      formUtil.resetData(this.answerForm);
      if(this.$refs.answerForm) this.$refs.answerForm.clearValidate();
      if(answer) {
        this.answerForm = JSON.parse(JSON.stringify(answer))
      } else {
        this.answerForm.optionDatatype = '2';
        this.answerForm.optionSort = question.optionList.length + 1;
        this.answerForm.optionBelongId = question.id;
      }
      this.answerFormDialogVisible = true;
    },
    submitAnswerForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if(this.answerForm.optionDatatype === '1') {
            let arr1 = this.questionList.filter( question => { return question.id === this.answerForm.optionBelongId})
            let arr2 = arr1[0].optionList.filter( answer => { return answer.optionDatatype === '1'})
            if (arr2.length > 0 && !this.answerForm.id) return this.$message.error('选项中已有输入框')
          }
          if(!await this.$httpN.postB(!this.answerForm.id ? 'recruitment/hrrecruitmentoption/save' : 'recruitment/hrrecruitmentoption/update', this.answerForm)) return
          formUtil.submitSuccess('保存成功');
          this.getQuestionList();
          this.answerFormDialogVisible = false;
        }
      });
    },
    delAnswer() {
      formUtil.submitConfirm('请问您是否确认删除该选项', async ()=> {
        if(!await this.$httpN.postB('recruitment/hrrecruitmentoption/delete', [this.answerForm.id], false)) return;
        formUtil.submitSuccess('删除成功');
        this.getQuestionList();
        this.answerFormDialogVisible = false;
      })
    },
    delExam() {
      formUtil.submitConfirm('请问您是否确认删除面试卷', async ()=> {
        if(!await this.$httpN.postB('recruitment/hrrecruitmentexamination/delete', [this.examId], false)) return;
        formUtil.submitSuccess('删除成功');
        this.$emit('refresh');
        this.dialogVisible = false;
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.el-dialog {
  .el-form {
    max-height: 500px;
    overflow: auto;
  }
  .dialog-footer {
    display: flex;
    justify-content: space-between;
  }
}
.dialog-style {
  /deep/ .el-dialog__header, /deep/ .el-dialog__body {
    padding: 0;
  }
  .title {
    text-align: center;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #DCDFE6;
    position: relative;
    .back {
      position: absolute;
      left: 20px;
      top: 7px;
      cursor: pointer;
    }
    .del-btn {
      position: absolute;
      right: 20px;
      top: 7px;
    }
  }
  .content {
    padding: 20px;
    height: calc(100vh - 50px);
    overflow: auto;
    .question-item {
      line-height: 30px;
      margin-bottom: 20px;
      .rows {
        margin-left: 30px;
      }
      .el-icon-edit-outline {
        color: #1989FA;
        cursor: pointer;
      }
    }
  }
}
</style>